{{extend 'layout.html'}}
<div id="search">
    <div class="row">
        <div class="span6">
            <div id="alert">
            </div>
        </div>
    </div>
    
    <div class="clearfix">
        <div class="input" >
            <form id="" action="/radio/music/search">
                {{boxes = ["Song", "Artist", "Album"]}}
            <div class="input-append">
                {{for b in boxes:}}
                <label for="{{=b}}" class="search">{{=b}}</label>
                <input
                class="mini"
                id="{{=b}}"
                name="{{=b}}"
                size="16"
                type="text">
                {{pass}}
            </div>
            <label for="genre" class="search">Genre</label>
            <div class="input">
                <select name="genre" id="genre">
                    <option value="">---</option>
                    {{for genre in genres.items():}}
                    <option value="{{=genre[0]}}">{{=genre[1]}}</option>
                    {{pass}}
                </select>
            <input class="btn primary" id="searchButton" name="submit" 
            type="submit" value="Search">
            </div>
        </div>
        <div class="clearfix"style="height:400px; overflow: scroll;">
            <table id="vwSongs" class="bordered-table zebra-striped">
                <thead>
                    <tr>
                        {{headers = ["Song", "Artist", "Album", "Genre", 
                            "Last Played", "Rating", "Play Count"]}}
                        {{for h in headers:}}
                        <th class="header">{{=h}}</th>
                        {{pass}}
                    </tr>
                </thead>
                <tbody>
                    {{for song in all_songs:}}
                    <tr>
                        <td>
                            {{=song.Name}}
                        </td>
                        <td>
                            {{=song.ArtistName}}
                        </td>
                        <td>
                            {{=song.AlbumName}}
                        </td>
                        <td>
                            {{=song.GenreDesc}}
                        </td>
                        <td>
                            {{=song.RecentPlay}}
                        </td>
                        <td>
                            {{=song.AverageRating}}
                        </td>
                        <td>
                            {{=song.PlayCount}}
                        </td>
                    </tr>
                    {{pass}}
                </tbody>
            </table>
        </form>
    </div>
</div>
